@use "../../ui/vars" as *;

.page-heading {
  font: var(--type-heading-h3);
  margin-bottom: 1rem;
}

.collection {
  padding: 0 0 3rem 0;
  position: relative;
  &-created {
    color: var(--text-secondary);
    font: var(--type-body-s);
    text-align: center;
    align-self: center;
    min-width: max-content;
    display: none;
    @media screen and (min-width: $screen-md) {
      display: inherit;
    }
  }
}

.doomed {
  /* stylelint-disable-line a11y/media-prefers-reduced-motion */
  /* we already disable all animation and transitions globally
  via a reset based on user prefs */
  opacity: 0;
  transition: 0.3s ease-out;
}

.unbookmark {
  position: absolute;
  right: 24px;
  top: 0;
}
